<template>
	<view>
		<view class="ra15 bgffff  pg25">
			<!-- <view class="flex-ju-b">
				<view class="flex-ju-a flex1">
					<view @click="taplist(index)" :class="{color0E74CF:tindex==index}" v-for="(item,index) in ['正在申报','正在公示','新发文件']">{{item}}</view>
				</view>
			</view> -->
			<scroll-view scroll-x>
				<view class="flex-a-i flex1">
					<view @click="taplist(index,item.id)" class="mr30" style="white-space: nowrap;" 
					:class="{color0E74CF:tindex==index}" v-for="(item,index) in category_list" :key="index">{{item.title}}</view>
				</view>
			</scroll-view>
		</view>
		<view  class="con">
			<view v-if="isdata" class="flex-ju-c color999 mt10vh">
				暂无数据
			</view>
			
			<view v-for="(item,index) in document" @click="navto('./news_detail?id='+item.id)" :key="index" class="flex-a-i mt30">
				<view>
					<image :src="item.image_input[0]" class="wh220-140 ra10"></image>
				</view>
				
				<view  class="ml20">
					<view class="one size30 mt15" style="max-width: 430rpx;">{{item.title}}</view>
					<view class="one size25 colorB8B8B8 mt5" style="max-width: 430rpx;">{{item.synopsis}}</view>
					<view class="size20 colorB8B8B8 mt5">{{item.add_time}}</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				document:[],
				category_list:[],
				isdata:false,
				tindex:0,
				page:1, 
				list:[],
				id:""
			}
		},
		onReachBottom() {
			this.page++
			this.getlist()
		},
		onLoad(option) {
			
			this.http('/article/category/list').then(res=>{
				
				res.data.map(item=>{
					if(item.id == 1){
						this.category_list=item.children
						this.id = item.children[0].id
						this.getlist()
					}
				})
				
				// this.category_list=res.data
				// this.id=res.data[0].id
				// this.getlist()
			})
		},
		methods: {
			taplist(index,id){
				this.id=id
				this.page=1
				this.document=[]
				this.tindex =index
				this.getlist()
			},
			getlist(id){
				this.http('/article/list/'+this.id,{limit:24,page:this.page}).then(res=>{
					this.document=[...this.document,...res.data]
					if(this.document.length){
						this.isdata = false
					}else{
						this.isdata = true
					}
				})
			},
		}
	}
</script>

<style>
 .color0E74CF{
		 color: #0E74CF;
		 font-weight: bold;
	 }
</style>
